<template>
  <div class="container">
    <div class="left-container" :class="{ smallSize: smallScreen }">
      <div id="index">
        <leftTop></leftTop>
        <flow-statistics />
        <person-analysis smallScreen />
      </div>
    </div>
    <div
      class="right-container"
      :class="{ smallSize: smallScreen, open: isOpenAlarm }"
    >
      <div class="alarm-btn" @click="handleOpenAlarmList">
        <el-badge :value="$store.state.warnNumber" :max="999">
          <img :src="require('@/assets/img/icon/alarm.png')" alt="" />
        </el-badge>
      </div>
      <warn-center ref="warnCenter" @checkWarn="checkWarn" />
      <area-warn
        :details="details"
        :showIndex="showIndex"
        :show="isOpenAlarm && show"
        @sendHandleMsg="sendHandleMsg"
        @closePopup="() => (this.show = false)"
        @handleAlarm="handleAlarm"
        @toPrev="toPrev"
        @toNext="toNext"
      />
    </div>
    <div class="bottom-container" :class="{ smallSize: smallScreen }">
      <CPTbottom
        :cameras="videoDeviceList"
        @showVideo="handleShowVideo"
        @showMap="handleShowHotMap"
      ></CPTbottom>
    </div>
    <amap
      ref="amap"
      :makers="videoDeviceList"
      @markerClick="handleMarkerClick"
      :showTraffic="isShowTraffic"
      :showCamera="isShowCamera"
      :showCircle="isShowCircle"
    ></amap>
  </div>
</template>

<script>
import flowStatistics from '../components/flowStatistics.vue'
import areaWarn from '../components/popupBox/areaWarn.vue'
import warnCenter from '../components/warnCenter/index.vue'
import personAnalysis from '../components/personAnalysis.vue'
import CPTbottom from '../components/bottom.vue'
import leftTop from '../components/left_top.vue'
import Amap from '_c/AMap'
import API, { deviceApi, alamCenterApi } from '@/api'
export default {
  name: 'index',
  components: {
    flowStatistics,
    personAnalysis,
    Amap,
    CPTbottom,
    leftTop,
    warnCenter,
    areaWarn
  },
  computed: {
    smallScreen () {
      const { wWidth, wHeight } = this
      const scale = 2160 / 3840
      // console.log(wHeight, wWidth)
      return (wHeight + 1) / wWidth < scale
    },
    warnNumber () {
      return this.$refs.warnCenter?.listData[0].total
    }
  },
  created () {
    this.initData()
  },
  mounted () {
    this.$nextTick(() => {
      // 适应全屏与非全屏尺寸
      const app = document.getElementById('app')
      this.wWidth = app.clientWidth
      this.wHeight = app.clientHeight
      window.addEventListener('resize', () => {
        this.wWidth = app.clientWidth
        this.wHeight = app.clientHeight
      })
    })
  },
  data () {
    return {
      videoDeviceList: [
        // {
        //   x: 120.406676,
        //   y: 30.27849,
        //   id: 1,
        //   type: 'video'
        // }
      ],
      isOpenAlarm: false,
      wWidth: document.body.clientWidth,
      wHeight: document.body.clientHeight,
      // area-warn数据
      details: [{
        id: '',
        level: '',
        time: '',
        happenTime: '',
        address: '',
        image: '',
        title: '',
        status: ''
      }],
      show: false,
      showIndex: 0,
      isShowTraffic: false,
      isShowCircle: false, // 是否展示摄像头范围
      isShowCamera: false // 是否展示摄像头标记
    }
  },
  methods: {
    initData () {
      this.getDeviceList()
    },
    sendHandleMsg ({ address }) {
      API(alamCenterApi.SEND_MSG, {
        msg: `${address} 发生报警，请尽快前往处理`, groupId: 1
      })
    },
    async handleAlarm ({ id }) {
      await API(alamCenterApi.GJ_STATUS, {
        id,
        status: 1
      })
      this.$message({
        message: "处理成功",
        type: "success",
      })
      this.$refs.warnCenter.getAllList()
      this.show = false
    },
    // 获取设备地图标记列表
    async getDeviceList () {
      const res = await API(deviceApi.LIST)
      this.videoDeviceList = res.data.map((e) => {
        e.y = Number(e.latitude)
        e.x = Number(e.longitude)
        return { ...e }
      })
    },
    handleShowVideo ({ flag, value }) {
      switch (flag) {
        case 'circle':
          this.isShowCircle = value
          this.isShowCamera = value
          break
        case 'camera':
          this.isShowCamera = value
          break
        default:
      }
    },
    handleShowHotMap ({ flag, value }) {
      switch (flag) {
        case 'people':
          value ? this.$refs.amap.showHeatMap() : this.$refs.amap.hideHeatMap()
          break
        case 'car':
          this.isShowTraffic = value
          break
        default:
      }
    },
    async handleMarkerClick ({ e, item }) {
      const {
        pixel: { x, y }
      } = e
      const { cameraindexcode, address } = item
      // const res = await API(deviceApi.GET_CAMERA_URL, {
      //   cameraIndexCode: cameraindexcode
      // })
      // const { url } = res.data
      this.$videoBox({
        videoDetail: {
          url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
          din: cameraindexcode,
          title: '钱塘江观潮城' // address
        },
        initPos: { x, y }
      })
    },
    handleOpenAlarmList () {
      this.isOpenAlarm = !this.isOpenAlarm
      this.show = false
    },
    checkWarn (warnList, index) {
      this.details = warnList.map(item => ({
        level: item.eventlvl,
        happenTime: item.happenTime,
        time: item.happenTime,
        address: item.address,
        srcParentIndex: item.srcParentIndex,
        image: item.imageurl,
        title: item.eventname,
        id: item.id,
        status: item.status
      }))
      this.showIndex = index
      this.show = true
    },
    toPrev () {
      this.show = false
      this.$nextTick(() => {
        this.show = true
        let temp = this.showIndex
        temp = temp--
        if (temp < 0) temp = 0
        this.showIndex = temp
      })
    },
    toNext () {
      this.show = false
      this.$nextTick(() => {
        this.show = true
        let temp = this.showIndex
        temp++
        if (temp === this.details.length) temp--
        this.showIndex = temp
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .left-container {
    position: absolute;
    width: 874px;
    height: 1890px;
    z-index: 1;
    left: 42px;
    bottom: 60px;
    background: rgba($color: #002a53, $alpha: 0.9);
    &.smallSize {
      height: 1740px;
      bottom: 30px;
    }
  }
  .right-container {
    position: absolute;
    width: 874px;
    height: 1890px;
    z-index: 1;
    right: -874px; // 42px;
    bottom: 60px;
    transition: all 0.2s;
    background: rgba($color: #002a53, $alpha: 0.9);
    &.open {
      right: 42px;
    }
    &.smallSize {
      height: 1740px;
      // width: 812px;
      bottom: 30px;
    }
    .alarm-btn {
      left: -233px;
      top: 6px;
      position: absolute;
      cursor: pointer;
      width: 133px;
      height: 150px;
      /deep/ .el-badge__content {
        height: 46px;
        width: 102px;
        border: none;
        line-height: 46px;
        border-radius: 46px;
        margin-right: 20px;
        margin-top: -4px;
        font-size: 32px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .popup-box-container {
      position: absolute;
      top: 200px;
      left: -900px;
    }
  }
  .bottom-container {
    position: absolute;
    z-index: 1;
    bottom: 60px;
    left: 940px;
    width: 885px;
    height: 197px;
    // background: rgba($color: #002a53, $alpha: 0.9);
    &.smallSize {
      bottom: 30px;
    }
  }
}
.smallSize /deep/ #person-analysis-container .my-chart {
  height: 240px;
}
.smallSize /deep/ .list {
  max-height: 1440px;
}
</style>
